<template>
    <div class="background-manage-container">
        <el-tabs v-model="activeTab" style="width: 200px">
            <el-tab-pane label="静态壁纸" name="static">
                <div
                    class="bg-item system-bg"
                    v-for="(pic, index) of backgroundMapList.static"
                >
                    <img
                        :key="index"
                        :src="pic.src"
                        alt=""
                        width="100px"
                        @click="updateBackground(0, pic)"
                    />
                </div>
            </el-tab-pane>
            <el-tab-pane label="动态壁纸" name="dynamic">
                <div
                    class="bg-item system-bg"
                    v-for="(pic, index) of backgroundMapList.dynamic"
                >
                    <!-- <img
                        :key="index"
                        :src="pic.src"
                        alt=""
                        width="100px"
                        @click="updateBackground(1, pic)"
                    /> -->
                    <div
                        class="item"
                        style="width: 100px; height: 50px"
                        @click="updateBackground(1, pic)"
                    >
                        {{ pic.src }}
                    </div>
                </div>
            </el-tab-pane>
        </el-tabs>

        <div class="choices" v-if="false">
            <div class="title">
                <h1>所有背景</h1>
            </div>
            <div class="absolute-box">
                <div class="background-list">
                    <!-- 系统自带背景 -->
                    <div class="bg-item system-bg" v-for="(pic, index) of 9">
                        <img
                            :key="index"
                            :src="'/background/' + pic + '.jpg'"
                            alt=""
                            width="100%"
                            @click="updateSystemBg('system', pic)"
                        />
                        <div class="tools">
                            <div class="btns">
                                <div class="preview-btn">
                                    <rambler-icon
                                        name="preview"
                                        class="icon"
                                        @click.native="
                                            updateSystemBg('system', pic)
                                        "
                                    ></rambler-icon>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 自定义背景 -->
                    <div class="bg-item custom-bg" v-if="hasUploadBg">
                        <img
                            :src="background.customBg"
                            width="100%"
                            @click="updateSystemBg('custom')"
                        />
                        <div class="tools">
                            <div class="btns">
                                <div class="preview-btn">
                                    <rambler-icon
                                        name="preview"
                                        class="icon"
                                        @click.native="updateSystemBg('custom')"
                                    ></rambler-icon>
                                </div>
                                <div class="change-btn">
                                    <rambler-icon
                                        name="exchange"
                                        class="icon"
                                        @click.native="uploadFile"
                                    ></rambler-icon>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 上传背景 -->
                    <div class="bg-item upload" @click="uploadFile" v-else>
                        上传图片
                    </div>
                    <input
                        id="upload"
                        type="file"
                        accept="image/*"
                        @change="readImage($event)"
                    />
                </div>
            </div>
        </div>

        <div class="preview-box" v-if="false">
            <div class="title">
                <h1>预览</h1>
            </div>
            <div
                class="preview"
                :style="{
                    backgroundImage: `url('${previewSrc}')`,
                    backgroundSize: 'cover',
                    backgroundRepeat: 'no-repeat',
                }"
            >
                <!-- 动效 -->
                <div class="effect">
                    <component
                        :is="dynamicBackground"
                        v-bind="dynamicAttrs"
                    ></component>
                </div>
            </div>
            <div class="title">背景动效</div>
            <div class="dynamic-bg">
                <el-radio-group
                    v-model="backgroundEffect"
                    @input="updateEffect"
                >
                    <el-radio label="snow">雪花</el-radio>
                    <el-radio label="bubble">气泡</el-radio>
                    <el-radio label="empty">无</el-radio>
                </el-radio-group>
            </div>
            <!-- <div class="title">背景模糊</div>
            <div class="dynamic-bg-blur">
                <rambler-input v-model="choosen.blur"></rambler-input>
            </div> -->
        </div>
    </div>
</template>
<script>
import { uploadFileSize } from "@/settings";
import { mapActions, mapState } from "vuex";
import backgroundService from "../services/background-service";
import { backgroundTypes } from "./index";
const backgroundMapList = {
    static: [
        { src: "/background/1.jpg" },
        { src: "/background/2.jpg" },
        { src: "/background/3.jpg" },
        { src: "/background/4.jpg" },
        { src: "/background/5.jpg" },
        { src: "/background/6.jpg" },
        { src: "/background/7.jpg" },
        { src: "/background/8.jpg" },
        { src: "/background/9.jpg" },
    ],
    dynamic: [
        { src: "/dynamic-background/1.mp4" },
        { src: "/dynamic-background/2.mp4" },
        { src: "/dynamic-background/3.mp4" },
        { src: "/dynamic-background/4.mp4" },
        { src: "/dynamic-background/5.mp4" },
        { src: "/dynamic-background/6.mp4" },
        { src: "/dynamic-background/7.mp4" },
        { src: "/dynamic-background/8.mp4" },
        { src: "/dynamic-background/9.mp4" },
        { src: "/dynamic-background/10.mp4" },
        { src: "/dynamic-background/11.mp4" },
        { src: "/dynamic-background/12.mp4" },
    ],
};
const attrMap = {
    snow: {
        maxSnowRadius: 10,
        maxSnowVx: 2,
        maxSnowVy: 2,
        maxSnowCount: 50,
    },
    bubble: {
        bubbleCount: 30,
        // 气泡半径
        maxBubbleRadius: 2,
        // 气泡最大速度
        maxBubbleSpeed: 1,
        // 气泡最小速度
        minBubbleSpeed: 0.5,
    },
};
export default {
    data() {
        return {
            dyBackground: "",
            choosen: {
                belong: "",
                systemBg: "",
                customBg: "",
                dyBackground: "",
                blur: 0,
            },
            backgroundEffect: "",
            activeTab: "static",
            backgroundMapList: backgroundMapList,
        };
    },
    computed: {
        ...mapState("setting", {
            background: (state) => state.background,
            effect: (state) => state.background.effect,
            backgroundType: (state) => state.background.type,
        }),
        dynamicBackground: function () {
            const backgroundType = this.backgroundType || 0; // 默认为静态背景
            // backgroundType为0、1、2所以通过数组映射
            return "background-" + backgroundTypes[backgroundType];
        },
        // 预览背景地址
        previewSrc: function () {
            return this.choosen.belong == "system"
                ? "/background/" + this.choosen.systemBg
                : this.choosen.customBg;
        },
        hasUploadBg() {
            return this.background.customBg ? true : false;
        },
        dynamicAttrs() {
            return attrMap[this.choosen.dyBackground];
        },
    },
    components: {
        BubbleBackground: () => import("./effects/bubble"),
        SnowBackground: () => import("./effects/snow"),
        EmptyBackground: () => import("./effects/empty"),
        BackgroundStatic: () => import("./backgrounds/static"),
        BackgroundDynamic: () => import("./backgrounds/dynamic"),
    },
    methods: {
        // 更新动效
        updateEffect(val) {
            if (val == "empty") {
                backgroundService["disable effect"]();
            } else {
                backgroundService["enable effect"]({
                    mode: val,
                });
            }
        },
        uploadFile() {
            document.querySelector("#upload").click();
        },
        // 读取文件，转为Base64编码
        readImage(e) {
            const files = e.target.files;
            if (files.length > 1) {
                this.$message.error("仅支持自定义一张照片");
            }
            const file = files[0];
            const { size } = file;
            if (size / 1024 / 1024 >= uploadFileSize) {
                return this.$message.error(
                    `单张文件大小不得超过${uploadFileSize}M`
                );
            }
            const reader = new FileReader();
            reader.readAsDataURL(file);
            reader.addEventListener("load", () => {
                this.choosen.belong = "custom";
                this.choosen.customBg = reader.result;
            });
            reader.addEventListener("error", (e) => {
                this.$message.error("读取文件失败，文件不存在");
            });
        },
        updateBackground(type, pic) {
            backgroundService["change background"]({
                type: type,
                src: pic.src,
            });
            this.$ramblerNotification.success("更换背景成功");
        },
    },
    created() {
        this.backgroundEffect = this.effect;
    },
};
</script>
<style lang="less" scoped>
@import url("./styles/background-manage.less");
</style>
